<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        /*html {*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*}*/

        /*body {*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    display: flex;*/
        /*    justify-content: center;*/
        /*    align-items: center;*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/

        /*.content {*/
        /*    display: flex;*/
        /*    justify-content: center;*/
        /*    !*align-items: center;*!*/
        /*    flex-direction: column;*/
        /*    margin: auto;*/
        /*    width: 900px;*/
        /*    height: 900px;*/
        /*    !* background: coral; *!*/
        /*}*/

        /*.btn {*/
        /*    display: block;*/
        /*    width: 120px;*/
        /*    height: 40px;*/
        /*    font-size: larger;*/
        /*    margin: 100px auto;*/
        /*}*/
        .fs-1 {
            font-size: 2rem;
        }
        #right {
            display: flex;
            align-items: center;
        }
        #right > div {
            margin: 0 20px;
        }
        #ocr_container {
            width: 90%;
        }
    </style>
</head>

<body>

<div id="ocr_container" class="container">
    <div class="row">
        <div class="col-md-8">
            <div>
                <h3>预测图片类型:</h3>
                <blockquote>
                    <p id="class_id" class="fs-1"></p>
                </blockquote>

            </div>
            <div>
                <h3>预测图片结果:</h3>
                <blockquote>
                    <p id="ocr_result" class="fs-1"></p>
                </blockquote>
            </div>
            <img id="img_data" src="" alt="预览" style="max-width: 100%; display: none;" class="img-rounded">
        </div>
        <div id="right" class="col-md-4" style="height: 100vh;">
            <div>
                <label for="imageUpload" class="fs-1">上传图片:</label>
                <input type="file" id="imageUpload" accept="image/*" class="me-2">
            </div>
            <div>
                <button id="uploadButton" class="btn-lg btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>


</body>
<script type="application/javascript">

    $(function () {
        $('#uploadButton').click(function () {
            var file_data = $('#imageUpload').prop('files')[0];   // 获取文件对象
            var form_data = new FormData();                  // 创建一个FormData对象  
            form_data.append('file', file_data);             // 将文件对象添加到FormData对象中
            $.ajax({
                url: '/api/uploadfile',                 // 文件上传的服务器地址  
                dataType: 'json',                   // 预期服务器返回的数据类型  
                cache: false,
                contentType: false,               // 告诉jQuery不要去设置Content-Type请求头  
                processData: false,               // 告诉jQuery不要去处理发送的数据  
                data: form_data,                   // 发送的数据  
                type: 'post',
                success: function (response) {
                    // console.log(response)     // 请求成功后的回调函数
                    // res = JSON.stringify(response)
                    // console.log(res)
                    console.log(response.class_id)
                    console.log(response.ocr_result)
                    $('#class_id').text(response.class_id)

                    let ocr_result = ""
                    for (const res of response.ocr_result) {
                        for (const key in res) {
                            console.log(`${key}: ${res[key]}`)
                            ocr_result = ocr_result + `${key}: ${res[key]}` + "<br/>"
                        }
                    }
                    $('#ocr_result').html(ocr_result)
                    $('#img_data').attr({
                        "src": 'data:image/jpeg;base64,' + response.img_data
                    })
                    $('#img_data').css({"display": "block"})

                },
                error: function (xhr, status, error) {
                    let responseText = xhr.responseText;
                    try {
                        // 尝试将响应文本解析为JSON对象
                        let parsedResponse = JSON.parse(responseText);
                        // 现在你可以使用parsedResponse变量了
                        // console.log("Parsed Error Response:", parsedResponse);
                        $('#ocr_result').text(parsedResponse.message);
                    } catch (e) {
                        // 如果解析失败（例如，因为响应不是有效的JSON），则输出原始文本
                        console.log("Error Response Text:", responseText);
                    }
                }
            });
        });
    });

</script>

</html>